<template>
	<div class="wrap">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="wrapbd">
            <div class="roll_i">
                <span>姓名</span>
                <input type="text" placeholder="请输入姓名" v-model.trim="nickname">
            </div>
			<input class="l_button" type="button" value="确认修改" :disabled="disableBtn" @click="revisename()">
		</div>
	</div>
</template>
<script>
	import HeadTitle from "./../../components/title.vue";
	export default {
		data(){
			return {
				headText: '修改姓名',  //顶部标题
				nickname: window.localStorage.getItem('nick'),
				disableBtn:false,
        // index: this.
			}
		},
		methods:{
			//左上角返回键
			onClickLeft () { this.$router.go(-1);},
			revisename(){
	            var _this = this;
				if(!this.Tools.regCombination.null.test(_this.nickname)){
                    this.$toast({message: '请输入姓名', position: 'bottom'})
                }else{
	                this.disableBtn = true;
	                this.Tools.AXIOS({
	                    url:'user/edit',
	                    transformRequest:{
							          nick_name: this.nickname,
	                    },
	                    success:function (res) {
							_this.$toast.success('修改成功');
							window.localStorage.setItem('nick',_this.nickname)
	                        setTimeout(function(){
	                       		_this.$router.push('/setting')
	                        },3000)
	                    },
                        error(res){
                            _this.disableBtn = false;
                        }
	                })
                }
			}
		},
		components: {
			HeadTitle,
		},
	}
</script>
<style scoped>
.wrapbd .roll_i{ width: 100%; display: flex; background: #fff; padding: .5rem 0; border-bottom: 1px solid #F6F6F6; position: relative;}
.wrapbd .roll_i span{ font-size: .35rem; text-indent: 12px;}
.wrapbd .roll_i input{ width: 60%; margin-left: .5rem; font-size: .35rem;}
.wrapbd p{ padding: 0 .3rem; font-size: .3rem; color: #bbbbbb;}
.wrapbd .l_button{ width: 90%; display: block; margin: 10% auto 0; padding: .3rem 0; background: #00990B; text-align: center; font-size: .4rem; color: #fff; border-radius: 6px;}
.verycode button{ right: .2rem;}
</style>
